<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 
    <title></title>
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
html,body{
	height: 100%;
}
.div{
	width: 8rem;height:8rem;background: black;float: left;
}
.div2{
	width: 8rem;height: 8rem;background: pink;float: left;
}


    </style> 


</head>
<body>
	<script type="text/javascript">
	/*16*20=320
      10*32=320
      32*10=320
      320 1 = 320

      400px = 20rem
      320/32 = 10

	  480

	  24 * 20 =480
	*/
	
	document.documentElement.style.fontSize = innerWidth/16+'px';
	onresize = function(){
		document.documentElement.style.fontSize = innerWidth/16+'px';
	};
	

	</script>
	<div class='div'></div>
	<div class='div2'></div>
</body>
</html>